<template>
    <div class="xd_optin_wp">
        <div class="title">
            <span>画出条件单</span>
            <i class="iconfonMy icon-guanbi1" @click="ipcRenderer.send('send-huaxiadanOption')"></i>
        </div>
        <div class="form">
            <span>手数</span>
            <input type="number" v-model.number="shoushu" @input="shoushuHaderInput" min="0" step="1">
            <span :class="{ active: active == 1 }" @click="selectedState(1)">买</span>
            <span :class="{ active: active == 2 }" @click="selectedState(2)">卖</span>
            <!-- <span @click="ipcRenderer.send('send-huaxiadanOption', { type: '平', num: shoushu })">平</span>
            <span @click="ipcRenderer.send('send-huaxiadanOption', { type: '反', num: shoushu })">反</span> -->
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const { ipcRenderer } = require('electron');


const shoushu = ref(1)
const active = ref(null)

function selectedState(v) {
    if (v == 1) {
        ipcRenderer.send('right_click_msg', { type: '画线买', num: shoushu.value })
    }
    if (v == 2) {
        ipcRenderer.send('right_click_msg', { type: '画线卖', num: shoushu.value })
    }
    active.value = v
}

function shoushuHaderInput(e) {
    let val = e.target.value
    if (val <= 1) {
        shoushu.value = 1
    } else {
        if (val.indexOf('.') != -1) {
            shoushu.value = val.split('.')[0]
        }
    }
}

</script>

<style scoped lang="less">
.xd_optin_wp {
    background-color: #f0f6eb;
    color: #000;
    height: 60px;
    overflow: hidden;

    .title {
        -webkit-app-region: drag;
        background-color: #f1f9d9;

        i {
            -webkit-app-region: no-drag;
        }
    }

    .title,
    .form {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 20px;
        padding-left: 5px;

        i {
            height: 20px;
            padding: 0 7px;
        }
    }

    .form {
        justify-content: flex-start;
        padding-top: 10px;

        span:nth-child(1),
        input {
            margin-right: 5px;
        }

        input {
            width: 70px;
        }

        span:nth-child(n+2) {
            margin: 0 5px;
            border: 1px #000000 solid;
            width: 22px;
            text-align: center;
            position: relative;
        }

        span:nth-child(n+2)::after {
            content: '';
            width: 100%;
            border-top: 1px dotted #000;
            position: absolute;
            left: 0;
            top: 10px;
        }

        .active {
            background-color: #a6a6a6;
            color: #cccccc;
        }
        .active:nth-child(n+2)::after {
            border-top: 1px dotted #cccccc;
        }
    }
}
</style>
